<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="alert alert-info col-sm-6" *ngIf="isConnected && !ready">
      Loading...
    </div>

    <div class="alert alert-info col-sm-6" *ngIf="isConnected && ready && !hasNodes">
      There is nothing to show... In default mode, ROS Control Center does not show default nodes / parameters / services and topics. You can show every item by using the advanced view setting, either in the seperate settings tab or here:
      <button class="btn btn-info btn-sm mb-2" (click)="setting.advanced = true">Enable Advanced View</button>
    </div>

    <div class="alert alert-danger col-sm-6" role="alert" *ngIf="!isConnected">
      The ROS Control Center is <b>not connected</b> to a robot running rosbridge_suite at {{ setting.address }}:{{ setting.port }}. You can change the URL in the <i>Settings</i> tab, further information can be found in the <a href="https://github.com/pantor/ros-control-center">GitHub Repository</a>.
    </div>
  </div>

  <div class="row" *ngIf="isConnected && ready && hasNodes">
    <div class="col-9">
      <div class="row">
        <div class="col-sm-3">
          <div class="card card-node" [class.active]="activeNode == n" *ngFor="let n of data.nodes" (click)="setActiveNode(n)">
            <h6 class="card-title">{{ n.name | humanize }}</h6>
          </div>

          <app-parameter *ngFor="let parameter of data.globalParameters" [parameter]="parameter"></app-parameter>
        </div>

        <div class="col-sm-9" *ngIf="activeNode">
          <p class="lead" style="font-size: 28px;">{{ activeNode.name | humanize }}</p>

          <app-topic [topic]="t" *ngFor="let t of activeNode.topics"></app-topic>
          <app-service [service]="s" *ngFor="let s of activeNode.services"></app-service>
          <app-parameter [parameter]="p" *ngFor="let p of activeNode.params"></app-parameter>
        </div>
      </div>
    </div>

    <div class="col-3">
      <div class="col sidebar">
        <div class="row console-row pt-2 pb-2" *ngFor="let logEntry of data.rosout">
          <div class="col-12 col-xl-4">
            <strong [ngClass]="{ 'text-danger bg-danger': logEntry.level > 8, 'text-danger': logEntry.level == 8, 'text-warning': logEntry.level == 4, 'text-info': logEntry.level == 2, 'text-muted': logEntry.level < 2 }">
              {{ logEntry.name | humanize }}
            </strong>
          </div>

          <div class="col-12 col-xl-8">
            {{ logEntry.msg }}
          </div>
        </div>
      </div>

      <div class="battery" *ngIf="setting.battery">
        <strong>Battery</strong><br>

        <div class="row" *ngIf="batteryStatus">
          <div class="col-xs-4 col-sm-3">
            <p>{{ 100 * batteryStatus | number: 1 }} %</p>
          </div>

          <div class="col-xs-8 col-md-9">
            <!--uib-progressbar type="{{ batteryStatus > 0.3 ? 'success' : 'danger' }}" min="0" max="1" value="batteryStatus"></uib-progressbar-->
          </div>
        </div>

        <p *ngIf="!batteryStatus" class="text-muted">No battery data yet.</p>
      </div>
    </div>
  </div>
</div>
